<!-- 方案排斥 -->
<template>
    <el-drawer
        v-loading="drawerLoading"
        :model-value="modelValue"
        :close-on-click-modal="false"
        :size="1275"
        class="repel-dialog"
        title="方案排斥"
        @closed="handleClose"
        @opened="handleOpen"
    >
        <div>
            <el-form :model="repelForm" :inline="true" class="repel-form" name="repelForm">
                <el-form-item label="刊播时间：">
                    <el-date-picker
                        v-model="beginTimeRange"
                        value-format="YYYY-MM-DD"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="方案名称：">
                    <el-input v-model.trim="repelForm.planName" placeholder="请输入方案名称" clearable> </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :loading="tableLoading" @click="handleSearch"> 查询 </el-button>
                </el-form-item>
            </el-form>
        </div>
        <div v-loading="tableLoading" class="transfer-table">
            <el-row :gutter="20" class="transfer-table-row">
                <el-col :span="11" class="transfer-table-col-left">
                    <div class="table_content not_selected">
                        <div class="header m-b-15">
                            <h2 class="table-title">未排斥方案列表</h2>
                        </div>
                        <XcTable
                            ref="virtualTableNoChoose"
                            :columns="tableColumnsLeft"
                            height="550px"
                            :border="true"
                            :data="noTableData"
                            :select-show="true"
                            is-selectable
                            @selection-change="notSelectedChange"
                        >
                        </XcTable>

                        <Pagination
                            class="my-pagination"
                            :page-no="pageInfo.pageNum"
                            :page-size="pageInfo.pageSize"
                            :total="pageInfo.total"
                            layout="prev, pager, next"
                            @changePage="changePage"
                            @changePageSize="changePageSize"
                        ></Pagination>
                    </div>
                </el-col>
                <el-col :span="2">
                    <div class="transfer-button">
                        <el-button
                            class="el-button el-button--primary el-button--default el-transfer__button"
                            :disabled="rightClickDis"
                            @click="rightToLeft"
                        >
                            <span>
                                <i class="el-icon">
                                    <svg
                                        class="icon"
                                        width="200"
                                        height="200"
                                        viewBox="0 0 1024 1024"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <path
                                            fill="currentColor"
                                            d="M609.408 149.376L277.76 489.6a32 32 0 000 44.672l331.648 340.352a29.12 29.12 0 0041.728 0 30.592 30.592 0 000-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 000-42.688 29.12 29.12 0 00-41.728 0z"
                                        />
                                    </svg>
                                </i>
                            </span>
                        </el-button>
                        <el-button
                            class="el-button el-button--primary el-button--default el-transfer__button el-button-down"
                            :disabled="leftClickDis"
                            @click="leftToRight"
                        >
                            <span>
                                <i class="el-icon">
                                    <svg
                                        class="icon"
                                        width="200"
                                        height="200"
                                        viewBox="0 0 1024 1024"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <path
                                            fill="currentColor"
                                            d="M340.864 149.312a30.592 30.592 0 000 42.752L652.736 512 340.864 831.872a30.592 30.592 0 000 42.752 29.12 29.12 0 0041.728 0L714.24 534.336a32 32 0 000-44.672L382.592 149.376a29.12 29.12 0 00-41.728 0z"
                                        />
                                    </svg>
                                </i>
                            </span>
                        </el-button>
                    </div>
                </el-col>
                <el-col :span="11">
                    <div class="table_content has_selected">
                        <div class="header">
                            <h2 class="table-title">已排斥方案列表</h2>
                            <div class="type-des">
                                <div class="type-setting">
                                    <template v-if="rightClickDis">
                                        <el-button type="primary" :disabled="true" class="m-r-15">
                                            设置排斥类型<el-icon class="el-icon--right"><ArrowDown /></el-icon>
                                        </el-button>
                                    </template>
                                    <template v-else>
                                        <el-dropdown
                                            popper-class="button-dropdown"
                                            trigger="click"
                                            class="el-dropdown-base m-r-15"
                                        >
                                            <el-button type="primary">
                                                设置排斥类型<i class="el-icon-arrow-down el-icon--right"></i>
                                            </el-button>
                                            <template #dropdown>
                                                <el-dropdown-menu>
                                                    <el-dropdown-item
                                                        :disabled="rightClickDis"
                                                        @click="clickExclude(1)"
                                                    >
                                                        楼盘排斥
                                                    </el-dropdown-item>
                                                    <el-dropdown-item
                                                        :disabled="rightClickDis"
                                                        @click="clickExclude(2)"
                                                    >
                                                        楼栋排斥
                                                    </el-dropdown-item>
                                                    <el-dropdown-item
                                                        :disabled="rightClickDis"
                                                        @click="clickExclude(3)"
                                                    >
                                                        单元排斥
                                                    </el-dropdown-item>
                                                    <el-dropdown-item
                                                        v-if="selectRow.mediaType === 1"
                                                        :disabled="rightClickDis"
                                                        @click="clickExclude(4)"
                                                    >
                                                        点位排斥
                                                    </el-dropdown-item>
                                                </el-dropdown-menu>
                                            </template>
                                        </el-dropdown>
                                    </template>
                                </div>
                            </div>
                        </div>
                        <XcTable
                            ref="virtualTableChoose"
                            :columns="tableColumnsRight"
                            height="550px"
                            :border="true"
                            :data="hasTableData"
                            :select-show="true"
                            is-selectable
                            @selection-change="hasSelectedChange"
                        >
                            <template #typeName="{ row }">
                                <span v-if="row.type === -1">未设置</span>
                                <span v-else-if="row.type === 1">楼盘排斥</span>
                                <span v-else-if="row.type === 2">楼栋排斥</span>
                                <span v-else-if="row.type === 3">单元排斥</span>
                                <span v-else-if="row.type === 4">点位排斥</span>
                            </template>
                        </XcTable>
                    </div>
                </el-col>
            </el-row>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button plain class="cancel" @click="handleClose"> 取 消 </el-button>
                <el-button v-loading="drawerLoading" :disabled="submitClickDis" type="primary" @click="submits">
                    确定
                </el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps, defineEmits, watch, computed } from 'vue';
import { pullAllBy } from 'lodash';
import XcTable from '@x-tech/fe-pc-components/src/components/XcTableTemplate/XcTable.vue';
import Pagination from '@/components/common/Pagination.vue';
import { getIncludeProject, saveExcludeProject, getExcludeProject } from '@/api/point';
import usePagInfo from '../hooks/usePagInfo';

const emits = defineEmits<{(e: 'update:modelValue', visible: boolean): void; (e: 'success'): void }>();
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    selectRow: {
        type: Object,
        default: () => null,
    },
});
const drawerLoading = ref(false);
const tableLoading = ref(false);
const beginTimeRange = ref('');
let repelForm = reactive({
    beginTime: '',
    endTime: '',
    planId: '',
    planName: '',
});
const noTableData = ref([]);
const notSelectedData = ref([]);
const hasTableData = ref([]);
const hasSelectedData = ref([]);
const { pageInfo, changePage, changePageSize } = usePagInfo();
const tableColumnsLeft = [
    { label: '方案名称', key: 'name' },
    { label: '方案状态', key: 'statusName' },
    { label: '投放周期', key: 'putInPeriod' },
];
const tableColumnsRight = [
    { label: '方案名称', key: 'name' },
    { label: '排斥类型', key: 'typeName', render: true },
    { label: '方案状态', key: 'statusName' },
    { label: '投放周期', key: 'putInPeriod' },
];

const leftClickDis = computed(() => {
    return !notSelectedData.value || !notSelectedData.value.length;
});

const rightClickDis = computed(() => {
    return !hasSelectedData.value || !hasSelectedData.value.length;
});

const submitClickDis = computed(() => {
    return hasTableData.value && hasTableData.value.find((item: any) => +item.type === -1);
});

const handleClose = () => {
    emits('update:modelValue', false);
};
// 未选排斥方案选择
const notSelectedChange = (data: any) => {
    notSelectedData.value = data;
    console.log('leftToRight notSelectedData1', notSelectedData.value);
};
// 已选排斥方案选择
const hasSelectedChange = (data: any) => {
    hasSelectedData.value = data;
};
// 让虚拟表格重绘
const handleNoTable = () => {
    let data = JSON.parse(JSON.stringify(noTableData.value));
    noTableData.value = data;
};

// 让虚拟表格重绘
const handleHasTable = () => {
    let data = JSON.parse(JSON.stringify(hasTableData.value));
    hasTableData.value = data;
};
const virtualTableNoChoose: any = ref(null);
const virtualTableChoose: any = ref(null);
const clearSelection = () => {
    console.log(virtualTableNoChoose.value);
    virtualTableNoChoose.value!.xcTableRef.clearSelection();
    virtualTableChoose.value!.xcTableRef.clearSelection();
    notSelectedData.value = [];
    hasSelectedData.value = [];
};

// 移除
const rightToLeft = () => {
    console.log('rightToLeft hasSelectedData2', hasSelectedData.value);
    pullAllBy(hasTableData.value, hasSelectedData.value, 'id');
    hasSelectedData.value.forEach((element) => {
        noTableData.value.push(element);
    });
    clearSelection();
};

// 添加
const leftToRight = () => {
    pullAllBy(noTableData.value, notSelectedData.value, 'id');
    notSelectedData.value.forEach((element) => {
        hasTableData.value.push({ ...element, type: -1 });
    });
    clearSelection();
};

const clickExclude = (type) => {
    hasSelectedData.value.forEach((item: any) => {
        item.type = type;
        return false;
    });
    let data = JSON.parse(JSON.stringify(hasTableData.value));
    data.forEach((item: any, index) => {
        hasSelectedData.value.forEach((select: any) => {
            if (item.id === select.id) {
                data[index] = { ...item, type: select.type };
            }
        });
    });
    hasTableData.value = JSON.parse(JSON.stringify(data));
};

// 获取未排斥方案列表
const getIncludeProjectList = async () => {
    tableLoading.value = true;
    try {
        let res = await getIncludeProject({ ...repelForm, ...pageInfo });
        console.log('noTableData.value res', res);
        noTableData.value = res.list;
        if (!noTableData.value || !noTableData.value.length) {
            noTableData.value = [];
        }
        pageInfo.total = res.total;
        console.log('noTableData.value', noTableData.value);
    } catch (e) {
        console.log('e', e);
    } finally {
        tableLoading.value = false;
    }
};

// 获取已排斥方案列表
const getExcludeProjectList = async () => {
    tableLoading.value = true;
    try {
        let res = await getExcludeProject(repelForm);
        console.log('getExcludeProjectList.value res', res);
        hasTableData.value = res;
        if (!hasTableData.value || !hasTableData.value.length) {
            hasTableData.value = [];
        }
        console.log('hasTableData.value', hasTableData.value);
    } catch (e) {
        console.log('e', e);
    } finally {
        tableLoading.value = false;
    }
};

watch(
    () => beginTimeRange.value,
    (val) => {
        if (val) {
            repelForm.beginTime = val[0];
            repelForm.endTime = val[1];
        } else {
            repelForm.beginTime = '';
            repelForm.endTime = '';
        }
    }
);
watch(
    () => [pageInfo.pageNum, pageInfo.pageSize],
    async () => {
        // 调用列表
        await getIncludeProjectList();
        await getExcludeProjectList();
    }
);
const handleOpen = async () => {
    repelForm.planId = props.selectRow.planId;
    await getIncludeProjectList();
    await getExcludeProjectList();
};

const handleSearch = async () => {
    await getIncludeProjectList();
    await getExcludeProjectList();
};

// 保存方案排斥
const submits = async () => {
    tableLoading.value = true;
    let otherPlanList: any = [];
    hasTableData.value.map((item: any) => {
        otherPlanList.push({
            id: item.id,
            type: item.type,
        });
    });
    let params = {
        otherPlanList: otherPlanList,
        planId: props.selectRow.planId,
    };
    try {
        await saveExcludeProject(params);
    } catch (e) {
        console.log('e', e);
    } finally {
        tableLoading.value = false;
    }
    emits('update:modelValue', false);
    emits('success');
};
</script>

<style lang="scss" scoped>
.transfer-table {
    .transfer-table-row {
        margin: 0 !important;
        align-items: center;
    }

    .transfer-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    ::v-deep(.el-button--default span) {
        height: 15px;
        line-height: 20px;
    }

    .table-title {
        font-weight: 500;
        font-size: 14px;
        color: #222222;
        text-align: left;
    }

    .header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 15px;
        align-items: center;
        position: relative;
        margin-top: 10px;
    }

    .type-des {
        position: absolute;
        right: 0;
    }

    .el-button-down {
        margin-left: 0;
        margin-right: 0;
    }
}

.transfer-table-col-left {
    position: relative;
}

.my-pagination {
    justify-content: center;
    position: absolute;
}
</style>
